<template>
  <div class="nearshop">
    <h2 class="nearshop__title">附近店铺</h2>
    <div class="nearshop__content">
      <router-link
        v-for="item in nearShopList"
        :key="item._id"
        :to="`/shop/${item._id}`"
      >
        <ShopInfo :item="item" />
      </router-link>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { get } from "../../utils/request";
import ShopInfo from "../../components/ShopInfo";
const useNearShopListEffect = () => {
  const nearShopList = ref([]);
  const getNearShopList = async () => {
    const result = await get("/api/shop/hot-list");
    if (result?.errno === 0 && result?.data?.length) {
      nearShopList.value = result.data;
    }
  };
  return { nearShopList, getNearShopList };
};
export default {
  name: "NearShop",
  components: { ShopInfo },
  setup() {
    const { nearShopList, getNearShopList } = useNearShopListEffect();
    getNearShopList();
    return { nearShopList };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.nearshop {
  &__title {
    font-size: 0.18rem;
    color: $content-fontcolor;
    line-height: 0.25rem;
    margin: 0.16rem 0 0.14rem;
  }
  &__content {
    a {
      display: block;
    }
    &__lis {
      display: flex;
      flex-direction: column;
      &__item {
        display: flex;
        margin-bottom: 0.12rem;
        &__img {
          width: 16.52%;
          height: 16.52%;
          margin-right: 0.16rem;
          vertical-align: middle;
        }
        &__con {
          flex: 1;
          padding-bottom: 0.12rem;
          border-bottom: 0.01rem solid $content-gbcolor;
          &__name {
            font-size: 0.16rem;
            color: $content-fontcolor;
            line-height: 0.22rem;
          }
          &__tags {
            font-size: 0.13rem;
            color: $content-fontcolor;
            line-height: 0.18rem;
            margin: 0.08rem 0;
            &__tag {
              margin-right: 0.16rem;
            }
            &__tag:last-child {
              margin-right: 0;
            }
          }
          &__activity {
            font-size: 0.13rem;
            color: #e93b3b;
            line-height: 0.18rem;
          }
        }
      }
    }
  }
}
</style>